<template>
  <div style="display: flex;justify-content: center">
    <div style="width: 1000px;min-height: 600px;display: block">
      <div style=" display: flex; align-items: center;justify-content: space-between;padding:20px;font-size: 16px;font-weight: bold;border-bottom: 1px solid #dce3e8">
        <div>
          分支
        </div>
        <el-button @click="newBranch" type="primary">新建分支</el-button>
        <el-dialog
            v-model="addVisible"
            title="新建分支"
            width="30%">
          起点
          <el-select v-model="baseBranchName" class="m-2" placeholder="请选择起点" style="margin-bottom:5%;width:50%">
            <el-option
                v-for="item in tableData"
                :key="item.branchName"
                :label="item.branchName"
                :value="item.branchName"
            />
          </el-select>
          <el-form :model="form" label-width="120px">
            <el-form-item label="新分支名称">
              <el-input v-model="form.targetBranch" style="width: 70%"/>
            </el-form-item>
          </el-form>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="addVisible = false">取消</el-button>
              <el-button type="primary" @click="save">确定</el-button>
            </span>
          </template>
        </el-dialog>
      </div>
      <div>
        <el-table :data="tableData" style="width: 100%;margin-top: 20px">
          <el-table-column prop="branchName" label="分支名称" ></el-table-column>
          <el-table-column align="right" label="操作">
            <template #default="scope">
              <el-button size="small" type="danger" @click="delBranch(scope.row.branchName)">删除分支</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "Branches",
  created() {
    return this.load()
  },
  data() {
    return {
      baseBranchName:'',
      form:{},
      addVisible:false,
      tableData: [],
      newBranchName:'',
    }
  },
  methods: {
    save(){
      request.post('/'+sessionStorage.getItem("userName")+'/'+sessionStorage.getItem("repoName")+'/branch/new',
          {
            "baseBranch":this.baseBranchName,
            "targetBranch":this.form.targetBranch,
          }).then(res => {
            console.log(res)
            if(res.code===200){
              this.$message({
                type:"success",
                message:"新增成功"
              })
              this.load()
            }
            else{
              this.$message({
                type:"error",
                message:"新增失败"
              })
            }
          }
      )
    this.addVisible=false
    },
    newBranch() {
        this.addVisible =!this.addVisible
        this.form = {}
    },
    delBranch(name) {
      request.post('/'+sessionStorage.getItem("userName")+'/'+sessionStorage.getItem("repoName")+'/branch/delete',{
        "branchName":name,
      }).then( res=>{
        if(res.code===200){
          this.$message({
            type:"success",
            message:"删除成功"
          })
          this.load()}
        else{
          this.$message({
            type:"error",
            message:"删除失败"
          })
        }
      })
    },

    load() {
      request.get(this.$route.path).then(res => {
        console.log(res)
        this.tableData = res.data
      })
    },

  }
}
</script>

<style scoped>

</style>

